<template>
	<view>
		<uni-nav-bar left-icon="left" backgroundColor="#569BFC" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
			<view class="nav-title">开户</view>
		</uni-nav-bar>
		<view class="content">
			<uni-forms style="border-bottom: 1px #eee solid;" label-position="top" :border="true">
				<uni-forms-item label="姓名" required>
					<uni-easyinput :inputBorder="false" v-model="bankInfo.userName" placeholder="请输入您的姓名" />
				</uni-forms-item>

				<!-- <uni-forms-item label="证件类型">
		
					<uni-easyinput :inputBorder="false" v-model="bankInfo.id_type" placeholder="请选择证件类型"  />
				</uni-forms-item> -->
				<uni-forms-item label="手机号" required>
					<uni-easyinput :inputBorder="false" v-model="bankInfo.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" required>
					<uni-easyinput :inputBorder="false" v-model="bankInfo.idNo" placeholder="请填写身份证号" />
				</uni-forms-item>


				<uni-forms-item label="身份证" required>
					<view class="idCard-box">
						<uni-file-picker class="upload-box" file-mediatype="image" return-type="object" limit="1"
							@select="(val)=>changeIdCardImg(val,'figure')">
							<view class="icon">
								<uni-icons type="upload" size="25" color="#42B983"></uni-icons>
								<view class="title">
									上传人像面
								</view>
							</view>
						</uni-file-picker>
						<uni-file-picker class="upload-box" file-mediatype="image" return-type="object" limit="1"
							@select="(val)=>changeIdCardImg(val,'emblem')">
							<view class="icon">
								<uni-icons type="upload" size="25" color="#42B983"></uni-icons>
								<view class="title">上传国徽面</view>
							</view>

						</uni-file-picker>
					</view>

				</uni-forms-item>
				<uni-forms-item label="证件有效期" label-width="200" required>
					<!-- <uni-datetime-picker type="date" :clear-icon="true" start="2024-01-01" end="2034-01-01"
						v-model="bankInfo.idExp" /> -->
					<view class="">
						<uni-easyinput @focus="opendatePopup" :inputBorder="false"
							:value="bankInfo.idExp=='9999-12-31'?'长期':bankInfo.idExp" placeholder="请输入证件有效期(证件到期日)" />

					</view>
				</uni-forms-item>
				<uni-forms-item label="住址" required>
					<uni-easyinput :inputBorder="false" v-model="bankInfo.address" placeholder="请输入您的住址" />
				</uni-forms-item>

				<uni-forms-item label="职业" required>
					<uni-data-select v-model="bankInfo.occupation" placement="top" :border="false"
						:localdata="occupationJson"></uni-data-select>
					<!-- <uni-easyinput :inputBorder="false" v-model="bankInfo.occupation" placeholder="请选择您的职业" /> -->
				</uni-forms-item>
				<!-- <uni-forms-item label="验证码">
					<view class="verifyCode-box">
						<uni-easyinput :inputBorder="false" v-model="bankInfo.verifyCode" placeholder="请输入手机号验证码" />
						<view class="send" v-if="!isSend" @click="sendVerifyCode">
							发送验证码
						</view>
				
						<uni-countdown class="countdown" v-else :show-day="false" :showHour="false" :showMinute="false"
							:second="60" color="#BBBBBB" @timeup="timeup"></uni-countdown>
					</view>

				</uni-forms-item> -->
			</uni-forms>
			<button style="border-radius: 50px;height: 35px;font-size: 14px;margin-top: 20px;"
				class="align-center justify-center" type="primary" hover-class="none" @click="next">确认</button>
		</view>
		<uni-popup ref="datePopup" type="bottom" border-radius="10px 10px 0 0" background-color="white"
			:mask-click="false">

			<picker-view v-if="visible" indicator-style="height: 50px;" @change="dateChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in dateInfo.years" :key="index">{{item}}
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in dateInfo.months" :key="index">
						{{item}}
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in dateInfo.days" :key="index">{{item}}
					</view>
				</picker-view-column>
			</picker-view>
			<view class="closeempty">
				<button style="border-radius: 50px;height: 35px;font-size: 14px;margin-top: 20px;"
					class="align-center justify-center" type="primary" hover-class="none"
					@click="closeDatePopup">确定</button>
				<!-- <view class="" @click="closeDatePopup">确定</view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,

	} from 'vue'
	import {
		onLoad,

	} from '@dcloudio/uni-app'
	import bankAcountApi from '@/sheep/api/member/bankAcount';
	import sheep from '@/sheep';
	import occupationJson from '@/static/js/occupation'
	const bankInfo = ref({
		userName: '',
		idNo: '',
		phone: '',
		userId: uni.getStorageSync('userId') || '',
		idExp: undefined,
		address: undefined,
		occupation: undefined,
		idPortrait: '',
		idEmblem: '',
	})
	// const idCardInfo = ref({
	// 	figure: undefined,
	// 	emblem: undefined
	// })




	const isSend = ref(false)
	const datePopup = ref(null)
	const visible = ref(true)
	const dateInfo = ref({
		years: [],
		months: [],
		days: [],
	})
	const opendatePopup = () => {
		uni.hideKeyboard(); //隐藏软键盘
		function getDigitCount(num) {
			if (num === 0) return 1; // 特殊情况处理
			return Math.floor(Math.log10(Math.abs(num))) + 1;
		}
		const date = new Date()
		const years = []
		const months = []
		const days = []
		for (let i = date.getFullYear(); i <= date.getFullYear() + 30; i++) {
			years.push(i.toString())
		}
		for (let i = 1; i <= 12; i++) {
			if (getDigitCount(i) == 1) {
				months.push(i.toString().padStart(2, '0'))
			} else {
				months.push(i.toString())
			}
		}
		for (let i = 1; i <= 31; i++) {
			if (getDigitCount(i) == 1) {
				days.push(i.toString().padStart(2, '0'))
			} else {
				days.push(i.toString())
			}
		}
		years.push('长期')
		months.push('-')
		days.push('-')
		dateInfo.value.years = years
		dateInfo.value.months = months
		dateInfo.value.days = days
		console.log('dateInfo.value', dateInfo.value)
		datePopup.value.open('bottom')

	}
	const closeDatePopup = () => {
		datePopup.value.close()
	}
	const dateChange = (e) => {
		console.log('时间选择', e);
		const val = e.detail.value
		let year = dateInfo.value.years[val[0]]
		let month = dateInfo.value.months[val[1]]
		let day = dateInfo.value.days[val[2]]
		// let time = year + month + day
		console.log('time=====>', year, month, day);

		if (year == '长期') {
			bankInfo.value.idExp = `9999-12-31`
		} else {
			bankInfo.value.idExp = `${year?year:new Date().getFullYear()}-${month?month:'01'}-${day?day:'01'}`
		}
	}
	const next = async () => {
		// verifyShow.value = true
		console.log('bankInfo.value', bankInfo.value);
		if (bankInfo.value.userName == '') {
			uni.showToast({
				title: '请输入您的姓名',
				icon: 'none'
			})
			return
		}
		// if (bankInfo.value.cardNo == '' || !/^\d{13,19}$/.test(bankInfo.value.cardNo)) {
		// 	uni.showToast({
		// 		title: '请输入正确的银行卡号',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		if (bankInfo.value.phone == '' || !/^1[3-9]\d{9}$/.test(bankInfo.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.idNo == '' || !/^(?:\d{15}|\d{17}[\dXx])$/.test(bankInfo.value.idNo)) {
			uni.showToast({
				title: '请输入正确的身份证号',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.idPortrait == '') {
			uni.showToast({
				title: '请上传身份证国徽面',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.idEmblem == '') {
			uni.showToast({
				title: '请上传身份证人像面',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.idExp == '') {
			uni.showToast({
				title: '请选择证件有效期',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.address == '') {
			uni.showToast({
				title: '请输入您的住址',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.occupation == '') {
			uni.showToast({
				title: '请选择您的职业',
				icon: 'none'
			})
			return
		}
		let openacctApplyResObj = {
			token: '',
			txnSeqNo: ''
		}
		console.log('开户数据', bankInfo.value);
		let openacctApplyRes = await bankAcountApi.openacctApply(bankInfo.value)
		console.log('提交开户数据信息', openacctApplyRes)
		if (openacctApplyRes.data.ret_code == '0000') {
			// uni.setStorageSync('setPasswordToken', openacctApplyRes.data.txn_seqno)
			openacctApplyResObj.token = openacctApplyRes.data.token;
			openacctApplyResObj.txnSeqNo = openacctApplyRes.data.txn_seqno;
			//获取密码因子
			let data = {
				userId: bankInfo.value.userId
			}
			let res = await bankAcountApi.getAcctmgrRandom(data)
			console.log('获取密码因子', res);

			//获取密码控件token
			let resp = await bankAcountApi.getAcctmgrPasswordToken({
				passwordScene: 'setting_password'
			})
			console.log('获取密码控件token', resp);

			if (res.data.ret_code == "0000") {
				// 以下参数通过服务端获取
				lianlianpay.invokePasswordControl({
					/**
					 * passwordScene 使用场景
					 * setting_password-设置密码
					 * change_password-修改密码
					 * bind_card_password-换绑卡
					 * cashout_password-提现
					 * pay_password-支付
					 */
					passwordScene: 'setting_password',
					oidPartner: res.data.oid_partner, // 商户号
					userId: res.data.user_id, // 用户号
					passwordElementToken: resp.data, // 向服务端请求生成的 token
					env: 'production', // 默认 production-生产
					styles: { // 样式集合
						themeColor: '#0E59F0', // 主题颜色（按钮等）
					}
				}, async (passwordObj) => {
					console.log('密码数据', passwordObj)
					if (passwordObj.code == '0000') {
						let data = {
							token: openacctApplyResObj.token || '',
							userId: uni.getStorageSync('userId') || '',
							randomKey: passwordObj.data.randomKey,
							password: passwordObj.data.password,
							txnSeqNo: openacctApplyResObj.txnSeqNo || ''
						}
						let resp1 = await bankAcountApi.openacctVerify(data)
						console.log('设置支付密码', resp1)
						if (resp1.data.ret_code == '0000') {
							uni.showToast({
								title: '开户成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/me'
								})
							}, 3000)
						}
					}

				})
			}




		} else {
			uni.showToast({
				title: res.data.ret_msg,
				icon: 'none'
			})
		}




	}
	const sendVerifyCode = () => {
		if (bankInfo.value.linkedPhone == '' || !/^1[3-9]\d{9}$/.test(bankInfo.value.linkedPhone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
			return
		}
		isSend.value = true
	}

	const timeup = () => {
		isSend.value = false
	}
	const changeIdCardImg = async (val, type) => {
		console.log('bankInfo.value', bankInfo.value);
		// if (bankInfo.value.phone == '' || !/^1[3-9]\d{9}$/.test(bankInfo.value.phone)) {
		// 	uni.showToast({
		// 		title: '请输入正确的手机号',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		console.log('changeIdCardImg', val, type);
		let res = await bankAcountApi.uploadIdCard(
			val.tempFiles[0],
			bankInfo.value
		)
		console.log('上传身份证', res);
		if (res.data.ret_code == '0000') {
			if (type == 'figure') {
				bankInfo.value.idPortrait = res.data.doc_id
			} else {
				bankInfo.value.idEmblem = res.data.doc_id
			}
		}

	}
	const onClickNavBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: transparent;
	}

	.picker-view {
		width: 100vw;
		height: 600rpx;
		margin-top: 20rpx;
		background-color: white;

	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.closeempty {
		padding: 10px;
	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.content {
		padding: 20px;
		box-sizing: border-box;
	}

	.verifyCode-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.send {
			padding: 5px 10px;
			box-sizing: border-box;
			background: #007AFF;
			color: white;
			border-radius: 50px;
			font-size: 11px;
		}

		.countdown {
			padding: 5px 10px;
			box-sizing: border-box;
			font-size: 14px;

		}
	}

	:deep(.file-picker__box) {
		width: 100% !important;
	}

	.idCard-box {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		.upload-box {
			margin-bottom: 10px;

			.icon {
				color: #42B983;
				text-align: center;
				font-size: 12px;

				.title {
					margin-top: 5px;
				}
			}

		}
	}
</style>